<template>
  <div>
    <div style="box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    width:90vn" ref="gsBox">
    <div class="codetext">带图标按钮</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-input style="width:350px;margin:10px"  gsStyle="info" v-model="str1" type="inputButton" 
      icon="iconfont iconsearch" placeholder="请选择类型"></gs-input>
    </div>
    <div class="codetext">带长度</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-Input style="width:360px;margin:10px"  gsStyle="warning" select v-model="str4" type="text" :long ="10" ></gs-input>
    </div>
    <div class="codetext">数字类型</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-input style="width:330px;margin:10px"  gsStyle="success" v-model="str2" type="number" ></gs-input>
    </div>
    <div class="codetext">富文本类型</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-input style="width:350px;margin:10px"  gsStyle="primary" v-model="str3" type="textarea" ></gs-input>
    </div>
    
    <div class="codetext">禁用</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-input style="width:330px;margin:10px" gsStyle="warning" disabled v-model="str" type="number" ></gs-input>
    </div>
    <!--  -->
    <pre class="code">
      <span class="codetitle">使用disabled定义是否禁用</span>
      <span class="codetitle">使用gsStyle定义风格一共八种风格 dark,primary, success, warning, danger, info,round,while</span>
      <span class="codetitle">使用type定义是否带图标或输入类型text,number,textarea,inputButton</span>
      <span class="codetitle">使用placeholder提示</span>
      <span class="codetitle">使用long定义输入长度</span>
      <span class="codetitle">使用select定义获得焦点自动选中</span>
      <gs-code title="gs-input"  attr=' gsStyle="primary" v-model="str" type="inputButton" :long ="10" icon="iconfont iconsearch"'></gs-code>
    </pre>

    </div>
  </div>
</template>
<script>
import gsInput from "../components/input/input";
import gsCode from "./code";
export default {
  name: 'vSelect',
  components: {
    gsCode,
    gsInput
  },
  data(){
    return {
      str:"",
      str1:"",
      str2:"",
      str3:"",
      str4:""
    }
  },
  methods:{
    click(){
      this.$emit("click",arguments)
    },
  },
}
</script>
